import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import classNames from 'classnames'
export default function Textared({
  className,
  maxLength = 200,
  value,
  onChange,
  ...rest
}) {
  const textRef = useRef(null)
  useEffect(() => {
    textRef.current.focus()
    // setSelectionRange可以指定光标的位置
    textRef.current.setSelectionRange(-1, -1)
  }, [])
  const [name, setname] = useState(value || '')
  const onValueChange = (e) => {
    setname(e.target.value)
    onChange?.(e)
  }
  return (
    <div className={classnames(styles.root, className)}>
      {/* 文本输入框 */}
      <textarea
        ref={textRef}
        {...rest}
        className={classNames('textarea', className)}
        maxLength={maxLength}
        placeholder={rest.placeholder}
        value={value}
        onChange={onValueChange}
      />

      {/* 当前字数/最大允许字数 */}
      <div className="count">
        {name.length}/{maxLength}
      </div>
    </div>
  )
}
